{% include "data/template-ui.html" %}
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="/static/css/datatables/foundation.min.css" />
<link rel="stylesheet" type="text/css" href="/static/css/datatables/dataTables.bootstrap4.min.css" />
<link rel="stylesheet" type="text/css" href="/static/css/datatables/fixedHeader.foundation.min.css" />
<link rel="stylesheet" type="text/css" href="/static/css/datatables/buttons.foundation.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/gijgo/1.9.9/combined/css/gijgo.min.css">

<style>
    .page-body {
        flex: 1;
        height: 0;
        overflow: auto;
        padding: 10px 15px;
    }
    .button-group .button {
        font-size: 12px;
        padding: 4px 10px;
    }

    .table-bordered thead td,
    .table-bordered thead th {
        border-bottom-width: 1px !important;
    }

    #table_wrapper {
        padding-top: 0 !important;
    }
    table {
        font-size: 14px;
    }
    .table_wrapper table th, .table_wrapper table td {
        padding: 0.55rem;
    }
    .gj-picker table tbody tr:nth-child(even) {
        background: #fff;
    }
    .gj-picker table th, .gj-picker table td {
        padding: 0 !important;
    }

    .content {
        display: flex;
        height: 100%;
    }
    .content .left {
        width: 240px;
        background: #fff;
        margin: 0 15px;
        border-radius: 4px;
    }
    .content .right {
        flex: 1;
        height: 100%;
        margin-right: 15px;
    }
    #version-list {
        margin: 0;
        padding: 15px;
        height: 100%;
        overflow: auto;
    }
    #version-list li {
        padding: 0 8px;
        line-height: 28px;
        border-radius: 2px;
        cursor: pointer;
    }
    #version-list li:hover {
        background: #ececec;
    }
    #version-desc {
        width: 240px;
        position: absolute;
        margin-top: 14px;
        line-height: 30px;
        text-align: center;
    }
    .version-active {
        background: #bae7ff !important;
    }
    .detail-header, .detail-item {
        display: flex;
        line-height: 22px;
    }
    .detail-header div, .detail-item div {
        width: 200px;
    }
</style>

<div class="container-fluid animated fadeInUp">
    <!-- 标题 -->
    <div class="row page-titles">
        <div class="col-md-3 align-self-center">
            <h3 class="text-primary" style="font-size: 21px">检核结果明细</h3>
        </div>

        <div class="col-md-9 align-self-center">
            <div class="row">
                数据日期：
                <input id="datepicker-start">
                <span style="margin: 0 30px">至</span>
                <input id="datepicker-end">
                <button type="button" class="btn btn-primary btn-xs p310" onclick="search();" style="margin-left: 30px;border-radius: 4px;">
                    查询<i class="fa fa-search" style="margin-left: 10px;"></i>
                </button>
            </div>
        </div>
    </div>

    <div class="page-body animated fadeInUp">
        <div class="row content">
            <div class="left">
                <div id="version-desc">请先点击查询</div>
                <ul id="version-list" onclick="clickList()"></ul>
            </div>
            <div class="right">
                <div class="card" style="height: 100%; margin:0">
                    <!-- 正文 -->
                    <div class="card-content">
                        <div class="table-loading" style="display: none">加载中...</div>
                        <table id="table" class="table-bordered" style="width:100%">
                            <thead>
                                <tr>
                                    <th>规则名称</th>
                                    <th>数据标准</th>
                                    <th>目标表</th>
                                    <th>是否风险集市</th>
                                    <th>问题分类</th>
                                    <th>报送数据量</th>
                                    <th>问题数据量</th>
                                    <th>绩效值</th>
                                    <th>版本号</th>
                                    <th>校验时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

<!-- DataTables JS -->                    
<script type="text/javascript" src="/static/js/DataTables/datatables.min.js"></script>
<!--<script type="text/javascript" src="https://cdn.bootcss.com/datatables/1.10.20/js/dataTables.foundation.min.js"></script>-->
<script type="text/javascript" src="/static/js/DataTables/ColReorder-1.5.0/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="/static/js/DataTables/Buttons-1.5.6/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="/static/js/DataTables/Buttons-1.5.6/js/buttons.foundation.min.js"></script>
<script type="text/javascript" src="/static/js/DataTables/Buttons-1.5.6/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="/static/js/DataTables/Buttons-1.5.6/js/buttons.print.min.js"></script>
<script type="text/javascript" src="/static/js/DataTables/Buttons-1.5.6/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="/static/js/DataTables/JSZip-2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="/static/js/DataTables/pdfmake-0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="/static/js/DataTables/pdfmake-0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="/static/js/DataTables/FixedHeader-3.1.4/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/gijgo/1.9.9/combined/js/gijgo.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/gijgo/1.9.13/combined/js/messages/messages.zh-cn.min.js"></script>

<script type="text/javascript" class="init">
    let company = "{{ company }}";

    $(document).ready(function () {
        initDatepicker();
    });

    // 初始化日期选择组件
    function initDatepicker () {
        $('#datepicker-start').datepicker({
            locale: 'zh-cn',
            showOnFocus: true,
            format: 'yyyy-mm-dd',
            disableDates: function (date) {
                return date.getTime() < Date.now();
            }
        });
        $('#datepicker-end').datepicker({
            locale: 'zh-cn',
            showOnFocus: true,
            format: 'yyyy-mm-dd',
            disableDates: function (date) {
                let cur = date.getTime();
                if (cur < new Date($('#datepicker-start').val()).getTime() - 8 * 3600 * 1000 || cur > Date.now()) {
                    return false;
                }
                return true;
            }
        });
    }

    // 渲染table
    function renderTable (data, config) {
        let table = $('#table').DataTable({
            destroy: config.refresh,
            searching: false,
            ordering: false,
            info: false,
            paging: false,
            scrollY: $('.right').height() - 116,
            scrollCollapse: true,
            fixedHeader: true, // 固定表头
            data: data,
            columns: [
                { data: 'note'},
                { data: 'check_item'},
                { data: 'target_table'},
                { data: 'risk_market_item'},
                { data: 'problem_type'},
                { data: 'total_count'},
                { data: 'problem_count'},
                { data: 'total_coefficient'},
                { data: 'check_version'},
                { data: 'check_date'}
            ],
            columnDefs: [{
                targets: 10,
                data: null,
                render: function (data, type, row) {
                    var html = `
							<div>
								<a href='javascript:void(0)' id="${data.id}" version="${data.check_version}">查看详情</a>
							</div>
						`;
                    return html;
                }
            }]
        });
        showDetail(table);
    }

    function showDetail(table) {
        $('#table tbody').on('click', 'td a', function () {
            let id = $(this).attr('id');
            let check_version = $(this).attr('version');
            let row = table.row($(this).closest('tr'));
            if (row.child.isShown()) {
                row.child.hide();
                $(this).html('查看详情');
            } else {
                let detail = `<div class="detail-header">
                    <div>规则名称</div>
                    <div>报送数据量</div>
                    <div>问题数据量</div>
                    <div>备注</div>
                </div>`;
                getDetail(id, check_version).then(res => {
                    if (res.stat == 200) {
                        res.data.forEach(v => {
                           detail += `<div class="detail-item">
                                <div>${v.t_name}</div>
                                <div>${v.total_count}</div>
                                <div>${v.problem_count}</div>
                                <div>${v.check_log}</div>
                            </div>`;
                        });
                        detail = `<div>${detail}</div>`
                        row.child(detail).show();
                    } else {
                        row.child(res.msg).show();
                    }

                    $(this).html('关闭');
                }).catch(e => {
                    row.child('查询失败').show();
                    $(this).html('关闭');
                })
            }
        });
    }

    // 点击查询
    function search () {
        getVersionList();
        // renderTable({refresh: true});
    }

    function getVersionList() {
        $post("../../api/quality/model_page_version", {
            company: company,
            startTime: $('#datepicker-start').val(),
            endTime: $('#datepicker-end').val()
        }).then(result => {
            if (result.data.length === 0) {
                $('#version-desc').html('暂无数据');
                return;
            }

            let lis = '';
            result.data.forEach((v, i) => {
                lis += `<li value="${v.version}">${v.check_date_str}-${v.version}</li>`;
            });
            if ($('#version-list li').length) {
                $('#version-list li').remove();
            }
            $('#version-list').append(lis);
            $('#version-desc').remove();
        }).catch(e => {
            console.error(e);
            $('#version-list li').remove();
            $('#version-list').append('<div id="version-desc">查询失败，请重试!</div>')
        });
    }

    function getSummary(version) {
        $('.table-loading').removeAttr('style');
        $post("../../api/quality/model_page_summary", {
            company: company,
            check_version: version
        }).then(result => {
            $('.table-loading').css('display', 'none');
            let hasBody = $('#table tbody').length ? true : false;
            renderTable(result.data, { refresh: hasBody });
        }).catch(e => {
            console.error(e);
            $('.table-loading').css('display', 'none');
        });
    }

    function getDetail(id, check_version) {
        return $post("../../api/quality/model_page_detail", {
            company: company,
            check_version: check_version,
            pid: id,
        }).then(result => {
            return result;
        }).catch(e => {
            console.error(e);
        });
    }

    function clickList() {
        let e = window.event || arguments.callee.caller.arguments[0];
        let version = e.target.value;
        if (version != undefined) {
            getSummary(e.target.value);
            $(e.target).siblings().removeClass();
            $(e.target).addClass('version-active');
        }
    }
</script>

</body>

</html>